<template>
  <div>
    <Table
      :loading="loading"
      :table-arr="dataList"
      :columns="columns"
      :height="300"
      :hasOperate="true"
      @selectList="selectionChange"
    >
      <template #status>
        <el-table-column label="状态" width="65">
          <template #default="{ row }">
            <span class="opened-status" v-if="row.status == 0">待确认</span>
            <span class="stoped-status" v-if="row.status == 1">已确认</span>
            <span v-if="row.status == 2">未启用</span>
          </template>
        </el-table-column>
      </template>
      <!-- <template #operate="{ row }">
        <el-button
          v-limit="'XMZX:XMGL:KJYFXM:DETAIL'"
          size="small"
          class="ordinary"
          @click="handleDetail(row)"
          >详情</el-button
        >
      </template> -->
    </Table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import Table from '@/views/project/components/table2/table.vue'

export default defineComponent({
  components: { Table },
  props: {
    tableArr: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
    isCheckbox: {
      type: Boolean,
      defaults: true,
    },
    loading: {
      type: Boolean,
    },
  },
  setup(props) {
    let data = reactive({
      currentList: [],
    })
    let dataList: any = ref(props.tableArr)
    watch(
      () => props.tableArr,
      (newVal) => {
        dataList.value = newVal
        console.log(newVal, 'props.tableArr')
      },
      { deep: true }
    )
    const selectionChange = (val) => {
      console.log(val, 'data.currentList')
      data.currentList = val
    }
    const hasChoose = () => {
      return data.currentList
    }
    return {
      data,
      dataList,
      hasChoose,
      selectionChange,
    }
  },
})
</script>

<style scoped></style>
